El atributo de destino de datos acepta varios selectores de CSS para aplicar la contracción. Si solo se usa un selector, la clase "colapsada" de navbar-toggle se alterna al descolgarse. Pero si se usan varios selectores, este comportamiento no funciona. En este caso, la clase "colapsada" siempre está presente. Pero necesito el cambio de clase "colapsado" en navbar-toggle.
Sería genial si alguien pudiera ayudar.
<div id="mainNav"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar, #userPanel" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"> <a href="#"> <span class="navicon glyphicon glyphicon-th" aria-hidden="true"></span> <span class="navtext">Dashboard</span> </a> </li> <li> <a href="#"> <span class="navicon glyphicon glyphicon-fire" aria-hidden="true"></span> <span class="navtext">About</span> </a> </li> </ul> </div> </nav> </div> <div id="userPanel" class="navbar-collapse collapse"> <ul> <li>Max Muster | 101945</li> <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout</a></li> </ul>Encontré una solución sin reestructurar los elementos:
Utilicé el selector de clase (" .navbar-collapse ") como objetivo de datos, funcionó bien pero enfrenté el mismo problema con el botón de alternar. Es decir, la clase " colapsada " no se eliminó: el script no pudo encontrar el elemento desencadenante cuando se especificaron varios objetivos.
De acuerdo con el código fuente en GitHub , buscan el elemento desencadenante de la siguiente manera:
this.$trigger = $('[data-toggle="collapse"][href="#' + element.id + '"],' + '[data-toggle="collapse"][data-target="#' + element.id + '"]')Obviamente, no funcionará si usamos una lista separada por comas de ID de elementos o un selector de clase en la propiedad de destino de datos . Iterará a través de todos los elementos, pero no encontrará el botón de activación correspondiente. Por suerte hay un truco que acabo de encontrar. El selector de activación verifica tanto el objetivo de datos como los atributos href (usando el operador lógico OR ), por lo que podemos engañarlo agregando un atributo href al botón de alternar, apuntando a una de las ID existentes ( #navbar OR #userPanel ) en mi código de muestra utilicé el primero:
Así que la solución sin reestructuración es:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" href="#navbar" aria-expanded="false" aria-controls="navbar,userPanel"> ... </button>Solo cambiando los atributos del botón de disparo, el resto del código sigue siendo el mismo.
envuelva ambos en un div con una id y use class para ambos datos como código dado intente usar data-parent para colapsar ambos, y avíseme si funciona para usted,
<div id="wraper"> <div id="mainNav"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-parent="#wraper" data-target=".navbar_collapsed_data" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> </div> <div class="navbar_collapsed_data navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"> <a href="#"> <span class="navicon glyphicon glyphicon-th" aria-hidden="true"></span> <span class="navtext">Dashboard</span> </a> </li> <li> <a href="#"> <span class="navicon glyphicon glyphicon-fire" aria-hidden="true"></span> <span class="navtext">About</span> </a> </li> </ul> </div> </nav> </div> <div class="navbar_collapsed_data navbar-collapse collapse"> <ul> <li>Max Muster | 101945</li> <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout</a></li> </ul> </div>Ahora hice una pequeña reestructuración y envolví los elementos colapsados en un solo contenedor. En mi caso funciona:
<nav class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-target="#collapseArea" data-toggle="collapse" aria-expanded="false" aria-controls="navbar"> ... </button> </div> <div id="collapseArea" class="navbar-collapse collapse"> <ul id="mainNav" class="nav navbar-nav"> <li>...</li> <li>...</li> </ul> <div id="userPanel"> <ul> <li>...</li> <li>...</li> </ul> </div> </div> </nav>